<template>
	<view>
		<view class="" style="position: fixed;">
			<u-sticky bgColor="#fff">
				<view class="" style="border-bottom: 3px solid #f5f5f5;">
					<u-tabs :list="list1" @click="click" :scrollable="true" :current="currentActive"
					
						:inactiveStyle="{color: '#000'}" :activeStyle="{color: '#fd7400'}" lineHeight="6rpx"
						lineColor="#fd7400"></u-tabs>
				</view>
			</u-sticky>
		</view>
		<view class="staging-content">

			<view class="menu" v-for="(item, index) in list1" :key="index">
				<view class="menu-item  mb-10" :class="'item' + index">
					<view class="title" style="margin-bottom: 16px; font-weight: 700;">
						{{ item.val }}
					</view>
					<view class="item-box">
						<view class="u-flex-center item" v-for="(item1, index1) in item.data"
							@click="goWorkLis1t(item1,index1)" :key="index1">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-orange" :style="{'background':item1.bg}">
									<i :class="item1.icon"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									{{item1.name}}
								</view>
								
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- <view class="menu">
				<view class="menu-item  mb-10">
					<view class="title" style="margin-bottom: 16px; font-weight: 700;">
						服务工单
					</view>
					<view class="item-box">
						<view class="u-flex-center item" @click="goWorkList(2)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-orange ">
									<i class="iconfont icon-daishouli"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									待受理
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goWorkList(3)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-orange">
									<i class="iconfont icon-daifenpei"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									待分配
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goWorkList(4)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-orange ">
									<i class="iconfont icon-jinzhan-"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									进展中
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goWorkList(5)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box  bg-orange">
									<i class="iconfont icon-daijiedan"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									待结单
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goWorkList(1)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box  bg-orange">
									<i class="iconfont icon-a-quanbu2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									全部工单
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="addorder">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-orange ">
									<i class="iconfont icon-xinjian"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									新建工单
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menu">
				<view class="menu-item  mb-10">
					<view class="title" style="margin-bottom: 16px; font-weight: 700;">
						工单备件
					</view>
					<view class="item-box" @click="goSpareList(1)">
						<view class="u-flex-center item">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									审核中
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goSpareList(2)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-daifahuo"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									待发货
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goSpareList(3)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-yijihuo"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									已发货
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goSpareList(4)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-a-quanbu2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									全部备件
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goSpareList(5)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-red ">
									<i class="iconfont icon-chexiao"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									撤销中
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goSpareList(6)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-red ">
									<i class="iconfont icon-tuihui1"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									待退回
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goSpareList(7)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-red ">
									<i class="iconfont icon-rukuon"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									待入库
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goSpareList(8)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-red ">
									<i class="iconfont icon-chexiao"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									全部撤销
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menu">
				<view class="menu-item  mb-10">
					<view class="title" style="margin-bottom: 16px; font-weight: 700;">
						工单费用
					</view>
					<view class="item-box">
						<view class="u-flex-center item" @click="goMonyeList(1)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-cyan ">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									审核中
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goMonyeList(2)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-cyan ">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									已批准
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goMonyeList(3)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box  bg-cyan">
									<i class="iconfont icon-shouquanbohui"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									已驳回
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goMonyeList(4)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-cyan ">
									<i class="iconfont icon-quxiao"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									已取消
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goMonyeList(5)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-cyan ">
									<i class="iconfont icon-yuanfeiyong"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									全部费用
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menu">
				<view class="menu-item  mb-10">
					<view class="title" style="margin-bottom: 16px; font-weight: 700;">
						一物一码
					</view>
					<view class="item-box">
						<view class="u-flex-center item" @click="goCodeList(1)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box  bg-blue">
									<i class="iconfont icon-shebeijihuo"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									待激活
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goCodeList(2)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box  bg-blue">
									<i class="iconfont icon-yijihuo"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									已激活
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goCodeList(3)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box  bg-blue">
									<i class="iconfont icon-icon-zhibaozhong"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									质保中
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goCodeList(4)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-blue ">
									<i class="iconfont icon-gongdan-quanbugongdan"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									已过保
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goCodeList(5)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-blue ">
									<i class="iconfont icon-a-quanbu2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									全部编码
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="menu">
				<view class="menu-item  mb-10">
					<view class="title" style="margin-bottom: 16px; font-weight: 700;">
						客户
					</view>
					<view class="item-box" @click="goCustomList(1)">
						<view class="u-flex-center item">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									客户列表
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menu">
				<view class="menu-item  mb-10">
					<view class="title" style="margin-bottom: 16px; font-weight: 700;">
						仓储管理
					</view>
					<view class="item-box" >
						<view class="u-flex-center item">
							<view class="u-flex-column" style="margin: auto;" @click="goFactory(1)">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									仓库列表
								</view>
							</view>
						</view>
						<view class="u-flex-center item">
							<view class="u-flex-column" style="margin: auto;" @click="goFactory(2)">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									仓库库存
								</view>
							</view>
						</view>
						<view class="u-flex-center item">
							<view class="u-flex-column" style="margin: auto;" @click="goFactory(3)">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									出库记录
								</view>
							</view>
						</view>
						<view class="u-flex-center item">
							<view class="u-flex-column" style="margin: auto;" @click="goFactory(4)">
								<view class="icon-box bg-violet ">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									入库记录
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="menu uflex">
				<view class="menu-item">
					<view class="title" style="margin-bottom: 16px; font-weight: 700;">
						资金管理
					</view>
					<view class="item-box">
						<view class="u-flex-center item" @click="goMoney(1)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-violet">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									费用报表
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goMoney(2)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-violet">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									应收应付
								</view>
							</view>
						</view>
						<view class="u-flex-center item" @click="goMoney(3)">
							<view class="u-flex-column" style="margin: auto;">
								<view class="icon-box bg-violet">
									<i class="iconfont icon-shenhe2"></i>
								</view>
								<view class="text" style="margin-top: 4px;">
									收支记录
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
			<!-- <view> -->
			<u-popup :show="show" @close="close">
				<view class="card">
					<view class="title">
						选择工单
					</view>
					<view class="item" @click="selectBtn(item)" v-for="item in modulelist" :key="item.id">
						{{item.title}}
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				modulelist: [],
				custAccid: '',
				list1: [{
						name: '服务工单',
						val: '服务工单',
						data: [{
							name: '待受理',
							icon: 'iconfont icon-daishouli',
							bg:'#fd7400'
						}, {
							name: '待分配',
							icon: 'iconfont icon-daifenpei',
							bg:'#fd7400'
						}, {
							name: '进展中',
							icon: 'iconfont icon-jinzhan-',
							bg:'#fd7400'
						}, {
							name: '待结单',
							icon: 'iconfont icon-daijiedan',
							bg:'#fd7400'
						}, {
							name: '全部工单',
							icon: 'iconfont icon-a-quanbu2',
							bg:'#fd7400'
						}, {
							name: '新建工单',
							icon: 'iconfont icon-xinjian',
							bg:'#fd7400'
						}, ]
					},
					{
						name: '工单备件',
						val: '工单备件',
						data: [
							{
								name: '待审备件',
								icon: 'iconfont icon-shenhe2',
								bg:'#7948ea'
							}, {
								name: '待发备件',
								icon: 'iconfont icon-daifahuo',
								bg:'#7948ea'
							}, {
								name: '已发备件',
								icon: 'iconfont icon-yijihuo',
								bg:'#7948ea'
							}, {
								name: '全部备件',
								icon: 'iconfont icon-a-quanbu2',
								bg:'#7948ea'
							}, 
							{
								name: '旧件退回',
								icon: 'iconfont icon-chexiao',
								bg:'#ff5543'
							},
							{
								name: '返厂',
								icon: 'iconfont icon-rukuon',
								bg:'#ff5543'
							}
							// {
							// 	name: '撤销中',
							// 	icon: 'iconfont icon-chexiao',
							// 	bg:'#ff5543'
							// }, {
							// 	name: '待退回',
							// 	icon: 'iconfont icon-tuihui1',
							// 	bg:'#ff5543'
							// }, {
							// 	name: '待入库',
							// 	icon: 'iconfont icon-rukuon',
							// 	bg:'#ff5543'
							// }, {
							// 	name: '全部撤销',
							// 	icon: 'iconfont icon-chexiao',
							// 	bg:'#ff5543'
							// },
						]
					},
					{
						name: '工单费用',
						val: '工单费用',
						data: [{
							name: '审核中',
							icon: 'iconfont icon-shenhe2',
							bg:'#00baad'
						}, {
							name: '已批准',
							icon: 'iconfont icon-shenhe2',
							bg:'#00baad'
						}, {
							name: '已驳回',
							icon: 'iconfont icon-shouquanbohui',
							bg:'#00baad'
						}, {
							name: '已取消',
							icon: 'iconfont icon-quxiao',
							bg:'#00baad'
						}, {
							name: '全部费用',
							icon: 'iconfont icon-yuanfeiyong',
							bg:'#00baad'
						}]
					},
					{
						name: '一物一码',
						val: '一物一码',
						data: [{
							name: '待激活',
							icon: 'iconfont icon-shebeijihuo',
							bg:'#268af0'
						}, {
							name: '已激活',
							icon: 'iconfont icon-yijihuo',
							bg:'#268af0'
						}, {
							name: '质保中',
							icon: 'iconfont icon-icon-zhibaozhong',
							bg:'#268af0'
						}, {
							name: '已过保',
							icon: 'iconfont icon-gongdan-quanbugongdan',
							bg:'#268af0'
						}, 
						{
							name: '全部编码',
							icon: 'iconfont icon-a-quanbu2',
							bg:'#268af0'
						},
						]
					},
					{
						name: '客户',
						val: '客户',
						data: [{
							name: '客户列表',
							icon: 'iconfont icon-shenhe2'
						}]
					},
					{
						name: '仓储管理',
						val: '仓储管理',
						data: [{
							name: '仓库列表',
							icon: 'iconfont icon-shenhe2'
						}, {
							name: '仓库库存',
							icon: 'iconfont icon-shenhe2'
						}, {
							name: '出库记录',
							icon: 'iconfont icon-shenhe2'
						}, {
							name: '入库记录',
							icon: 'iconfont icon-shenhe2'
						}, 
						// {
						// 	name: '全部编码',
						// 	icon: 'iconfont icon-shenhe2'
						// },
						]
					},
					{
						name: '资金管理',
						val: '资金管理',
						data: [{
							name: '费用报表',
							icon: 'iconfont icon-shenhe2'
						}, {
							name: '应收应付',
							icon: 'iconfont icon-shenhe2'
						}, {
							name: '收支记录',
							icon: 'iconfont icon-shenhe2'
						}]
					}
				],
				preActive: 0,
				currentActive: 0,
				//   为了解决点击滑动的bug，点击的时候，滑动里面不处理任何逻辑
				isClick: false
			};
		},
		onLoad(e) {
			this.custAccid = uni.getStorageSync('custAccid')
			if (e.typeName) {
				for (var i = 0; i < this.list1.length; i++) {
					if (this.list1[i].name === e.typeName) {
						uni.pageScrollTo({
							duration: 500,
							// duration: item.scrollTop.top,
							scrollTop: 250 * i,
						})
						break;
					}
				}
			}
			// this.ordermodule(this.custAccid)
		},
		onPageScroll(obj) {
			const {
				scrollTop
			} = obj
			this.scrollTochang(scrollTop)
		},
		mounted() {
			this.$nextTick(() => {
				//   此时把每个dom的距离拿出来
				this.list1.forEach((item, index) => {
					uni
						.createSelectorQuery()
						.select('.menu')
						.boundingClientRect(data => {
							//目标节点、也可以是最外层的父级节点
							uni
								.createSelectorQuery()
								.select(`.item${index}`)
								.boundingClientRect(res => {
									//最外层盒子节点
									console.log(res, data, '这里')
									item.scrollTop = res.top - data.top
								})
								.exec()
						})
						.exec()
				})
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				uni.stopPullDownRefresh()
			},
			async goWorkLis1t(item, index) {
				console.log(item, index)
				let that = this
				switch (item.name) {
					case '全部工单':
						uni.reLaunch({
							url: `../index/worklist?typeName=${item.name}`
						})
						break;
					case "待受理":
						uni.reLaunch({
							url: `../index/worklist?typeName=${item.name}`
						})
						break
					case "待分配网点":
						uni.reLaunch({
							url: `../index/worklist?typeName=${item.name}`
						})
						break
					case "进展中":
						uni.reLaunch({
							url: `../index/worklist?typeName=${item.name}`
						})
						break
					case "待结单":
						uni.reLaunch({
							url: `../index/worklist?typeName=${item.name}`
						})
						break
					case "待处理的":
						uni.reLaunch({
							url: `../index/worklist?typeName=${item.name}`
						})
						break
					case "新进展":
						uni.reLaunch({
							url: `../index/worklist?typeName=${item.name}`
						})
						break
					case "新建工单":
						this.show = true
						const res = await uni.$api.work.ordermodule({
							custAccId: this.custAccid
						})
						console.log(res)
						this.modulelist = res.data
						break;
					case '待审备件':
						uni.navigateTo({
							url: `../../pagesA/pages/spare/sparelist?typeName=${item.name}`
						})
						break;
					case '待发备件':
						uni.navigateTo({
							url: `../../pagesA/pages/spare/sparelist?typeName=${item.name}`
						})
						break;
					case '已发备件':
						uni.navigateTo({
							url: `../../pagesA/pages/spare/sparelist?typeName=${item.name}`
						})
						break;
					case '全部备件':
						uni.navigateTo({
							url: `../../pagesA/pages/spare/sparelist?typeName=${item.name}`
						})
						break;
					case '撤销中':
						uni.navigateTo({
							url: `../../pagesA/pages/spare/sparelist?typeName=${item.name}`
						})
						break;
					case '待退回':
						uni.navigateTo({
							url: `../../pagesA/pages/spare/sparelist?typeName=${item.name}`
						})
						break;
					case '待入库':
						uni.navigateTo({
							url: `../../pagesA/pages/spare/sparelist?typeName=${item.name}`
						})
						break;
					case '旧件退回':
						uni.showToast({
							title: '此功能正在开发当中',
							icon: 'none',
							duration: 1000
						})
						// uni.navigateTo({
						// 	url: `../../pagesA/pages/spare/returns`
						// })
						break;
					case '返厂':
						uni.showToast({
							title: '此功能正在开发当中',
							icon: 'none',
							duration: 1000
						})
						// uni.navigateTo({
						// 	url: `../../pagesA/pages/spare/returning`
						// })
						break;
					case '仓库列表':
						uni.navigateTo({
							url: '/pagesA/pages/factory/factory'
						})
						break;
					case '仓库库存':
						uni.navigateTo({
							url: '/pagesA/pages/factory/ckkc'
						})
						break;
					case '出库记录':
						uni.navigateTo({
							url: '/pagesA/pages/factory/cklist'
						})
						break;
					case '入库记录':
						uni.navigateTo({
							url: '/pagesA/pages/factory/rklist'
						})

						break;
					case '待激活':
						uni.navigateTo({
							url: `../../pagesA/pages/code/codelist?typeName=${item.name}`
						})
						break;
					case '已激活':
						uni.navigateTo({
							url: `../../pagesA/pages/code/codelist?typeName=${item.name}`
						})
						break;
					case '质保中':
						uni.navigateTo({
							url: `../../pagesA/pages/code/codelist?typeName=${item.name}`
						})
						break;
					case '已过保':
						uni.navigateTo({
							url: `../../pagesA/pages/code/codelist?typeName=${item.name}`
						})
						break;
					case '全部编码':
						uni.navigateTo({
							url: `../../pagesA/pages/code/codelist?typeName=${item.name}`
						})
						break;
					case '费用报表':
						uni.navigateTo({
							url: '/pagesA/pages/money/fnanceorderdaolist'
						})
						break;
					case '应收应付':
						uni.navigateTo({
							url: '/pagesA/pages/money/receivepayfnancelist'
						})
						break;
					case '收支记录':
						uni.navigateTo({
							url: '/pagesA/pages/money/getfnanceloglist'
						})
						break;
					case '审核中':
						uni.navigateTo({
							url: `../../pagesA/pages/money/money?typeName=${item.name}`
						})
						break;
					case '已批准':
						uni.navigateTo({
							url: `../../pagesA/pages/money/money?typeName=${item.name}`
						})
						break;
					case '已驳回':
						uni.navigateTo({
							url: `../../pagesA/pages/money/money?typeName=${item.name}`
						})
						break;
					case '已取消':
						uni.navigateTo({
							url: `../../pagesA/pages/money/money?typeName=${item.name}`
						})
						break;
					case '全部费用':
						uni.navigateTo({
							url: `../../pagesA/pages/money/money?typeName=${item.name}`
						})
						break;
					case '客户列表':
						uni.navigateTo({
							url: '/pagesA/pages/custom/custom'
						})
					default:
				}
			},
			 selectBtn(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pagesA/pages/worklist/test?moduleId=' + item.id
				})
			},
			scrollTochang(scrollTop) {
				if (this.isClick) return
				const idx = this.list1.findIndex(item => scrollTop <= item.scrollTop)
				if (this.currentActive === idx) return
				this.currentActive = idx
				this.preActive = this.currentActive
			},
			click(item) {
				console.log(item)
				this.isClick = true
				const that = this
				const {
					scrollTop
				} = item
				this.currentActive = item.index
				uni.pageScrollTo({
					duration: 120* Math.abs(this.currentActive - this.preActive),
					// duration: item.scrollTop.top,
					scrollTop,
					complete() {
						that.isClick = false
					}
				})
				this.preActive = this.currentActive
			},
			close(){
				this.show=false
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		
	}
</script>

<style lang="scss">
	.tabs {
		background-color: #fff;
		font-size: 28rpx;
	}

	.card {
		height: 30vh;
		overflow-y: auto;

		.title {
			text-align: center;
			padding: 10px;
			font-size: 18px;
			border-bottom: solid 1px #f6f6f6;

		}

		.item {
			font-size: 16px;
			padding: 10px;
			border-bottom: solid 1px #f6f6f6;
		}
	}


	.staging-content {
		width: 100%;
		height: calc(100% - 44px);
		background-color: #f5f5f5;
		padding: 20rpx;
		padding-top: 110rpx;
		padding-bottom: 0;

		.menu {
			.menu-item {
				background: #fff;
				padding: 40rpx 28rpx;
				border-radius: 10rpx;

				.item-box {
					display: flex;
					flex-wrap: wrap;

					.item {
						width: 25%;
						margin-bottom: 18px;

						.icon-box {
							width: 100rpx;
							height: 100rpx;
							text-align: center;
							line-height: 100rpx;
							border-radius: 40rpx;
						}

						.text {
							margin-top: 8rpx;
							font-size: 28rpx;
						}
					}
				}

				.items {
					text-align: center;
					line-height: 100rpx;
					border-radius: 40rpx;
					width: 100%;

					.title {
						font-size: 16px;
						font-weight: 700;
						margin-bottom: 32rpx;
					}
				}
			}
		}
	}
</style>